<template>
	<view class="borderbox">
		<!-- 数据同步部分 -->
		<view class="pt60 pl30">
			<view class="middle ml10 pt30">
				<view class="mid-item" v-for="(item, index) in dataList" :key="index">
					<CenterData :data="item"></CenterData>
					<view class="lines"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import CenterData from '../components/CenterData/CenterData.vue';
export default {
	components: { CenterData },
	data() {
		return {
			dataList: [
				{
					id: 1,
					img: '../.././static/milkanmuxi.png',
					name: '安慕希酸奶',
					price: 25.8,
					stock: 1900
				},
				{
					id: 2,
					img: '../.././static/milkanmuxi.png',
					name: '巧克力酸奶',
					price: 19.8,
					stock: 1800
				},
				{
					id: 3,
					img: '../.././static/milkanmuxi.png',
					name: '鲜牛奶',
					price: 29.9,
					stock: 1700
				},
				{
					id: 4,
					img: '../.././static/milkanmuxi.png',
					name: '蒙牛酸奶',
					price: 25.8,
					stock: 1600
				},
				{
					id: 5,
					img: '../.././static/milkanmuxi.png',
					name: '安花花牛酸奶',
					price: 16.9,
					stock: 1500
				}
			]
		};
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f9f9f9;
}
.middle {
	width: 670rpx;
	background: #fff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	.mid-item {
	}
	.mid-item:last-child {
		padding-bottom: 20rpx;
		.lines {
			display: none;
		}
	}
}
.lines {
	width: 590rpx;
	height: 2rpx;
	background-color: #eaeaea;
	margin: 0 auto;
	margin-top: 30rpx;
	margin-bottom: 40rpx;
}
</style>
